<template>
  <div class="common-layout__home">
    <el-container>
      <!-- 用户信息边框 -->
      <el-aside width="150px">
        <!-- 头像 -->
        <div class="avatar">
          <AvatarBackImg
            :avatar="userInfo.headshot"
            size="70px"
          ></AvatarBackImg>
          <h3>{{ userInfo.name }}</h3>
        </div>
        <div>
          <el-menu default-active="1" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <template #title>
                <router-link :to="`/home/${route.params.id}`" class="link"
                  >{{ store().userInfo.id === userInfo.id ? "我的投稿" : "投稿" }} </router-link
                >
              </template>
            </el-menu-item>
            <el-menu-item index="2" v-if="store().userInfo.id === userInfo.id">
              <template #title>
                <router-link
                  :to="`/home/userinfo/${route.params.id}`"
                  class="link"
                  >用户信息</router-link
                >
              </template>
            </el-menu-item>

            <el-menu-item index="3" v-if="store().userInfo.id === userInfo.id">
              <template #title>
                <router-link
                  :to="`/home/collection/${route.params.id}`"
                  class="link"
                  >我的收藏</router-link
                >
              </template>
            </el-menu-item>
          </el-menu>
        </div>
      </el-aside>
      <!-- main -->
      <el-main>
        <RouterView />
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import AvatarBackImg from "@/components/AvatarBackImg.vue";
import { ref, watch, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import userApi from "@/api/user"
import { User } from "@/types/user";
import store from '@/store/store'

const route = useRoute();
const userInfo = ref(<User>{});

const getUserInfo = async (userId: string) => {
  const { code, data } = await userApi.getById(userId);
  if (code === 0) {
    userInfo.value = data;
  }
};
const watchRoute = watch(
  () => route.params.id,
  (val) => {
    getUserInfo(val + "");
  },
  { immediate: true }
);

onUnmounted(() => {
  watchRoute();
});
</script>

<style lang="scss" scoped>
.common-layout__home {
  padding-top: 20px;
  padding-left: 150px;
  padding-right: 100px;

  .el-aside {
    .avatar {
      margin-left: 20px;
      width: 70px;

      h3 {
        color: rgb(87, 87, 87);
        text-align: center;
      }
    }
  }
}
</style>

<style lang="scss"></style>
